<template>
  <div class="input-tag-box" tabindex="0" @focus="clickTxt">
    <el-tooltip v-for="tag in dynamicTags"
                :key="tag"
                :content="tag"
                :disabled="tag?.length < 10"
                placement="top">
      <el-tag style="margin: 0.1rem;"
              class="mx-1"
              ref="tag"
              closable
              :type="tag === dynamicTags.at(-1) && isDelete?'danger':''"
              :disable-transitions="false"
              @close="handleClose(tag)">
        <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 4rem;display: inline-block;">
          {{ tag }}
        </div>
      </el-tag>
    </el-tooltip>
    <el-input v-model="textarea"
              :rows="rows"
              type="textarea"
              ref="txt"
              :placeholder="placeholder"
              @keydown.enter="handleEnter"
              @keydown.delete="handleDelete"
              @input="changeText"/>
    <!--        <el-button class="btn-search el-input-group__append" @click="handleClick" icon="Search"/>-->
    <el-icon class="btn-clean" v-if="dynamicTags?.length > 0" @click="handleClean">
      <CircleClose/>
    </el-icon>
    <!--        <div class="el-input__prefix" style="position: absolute; top: 0; left: 0; padding: 0 0.6rem;">-->
    <!--            <div class="el-input__prefix-inner">-->
    <!--                <slot name="prefix" class="el-input__prefix-inner"></slot>-->
    <!--            </div>-->
    <!--        </div>-->
  </div>

  <!--    <el-select-->
  <!--            v-model="textarea"-->
  <!--            multiple-->
  <!--            filterable-->
  <!--            allow-create-->
  <!--            default-first-option-->
  <!--            -->
  <!--    ></el-select>-->
</template>
<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: "inputTag",
  props: {
    modelValue: String,
    rows: Number,
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dynamicTags: [],
      textarea: '',
      isDelete: false

    }
  },
  created() {
    if (this.modelValue) {
      this.dynamicTags = this.modelValue?.split(',') || []
    }
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags = this.dynamicTags.filter(n => n !== tag)
      this.$emit('update:modelValue', this.dynamicTags.join(','))
      this.$emit('onchange', this.dynamicTags)
    },
    handleEnter(evn) {
      if (this.textarea.at(-1) === '\n') {
        this.changeText(this.textarea)
      }
    },
    changeText(txt) {
      let arr = [' ', '\n', ';', ',', '.', '；', '，', '、', '，', '。']
      if (!arr.includes(txt.substring(txt.length - 1))) {
        return
      }
      if (txt.trim()) {
        let a = txt
            .replace(/^[\n,]+|[\n,]+$/g, '')
            .replace(/\s+|[\n;,.；，、。]+/g, ',')
            .replace(/,+/g, ',').split(',')
        let set = new Set([...this.dynamicTags, ...a])
        this.dynamicTags = (Array.from(set)).filter(item => item)
      }
      console.log('dynamicTags', this.dynamicTags)
      setTimeout(() => {
        this.textarea = ''
      })
      this.$emit('update:modelValue', this.dynamicTags.join(','))
      this.$emit('onchange', this.dynamicTags)
    },
    clickTxt() {
      this.$refs.txt.focus()
    },
    handleDelete() {
      if (this.textarea === '') {
        if (this.isDelete) {
          this.dynamicTags.pop()
          this.isDelete = false
        } else {
          this.isDelete = !this.isDelete
        }
      }
    },
    handleClean() {
      this.dynamicTags = []
      this.$emit('update:modelValue', this.dynamicTags.join(','))
      this.$emit('onchange', this.dynamicTags)
    },
    handleClick() {
      this.$emit('onclick')
    }
  }
})
</script>

<style scoped lang="scss">
.input-tag-box {

  :deep(.el-textarea__inner) {
    box-shadow: none;
    padding: 0;
  }

  position: relative;
  padding: 0.1rem;
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));

  .btn-search {
    position: absolute;
    border-left: var(--el-border);
    right: 0;
    top: 0;
    width: 3rem;
    border-radius: 0 var(--el-input-border-radius, var(--el-border-radius-base)) var(--el-input-border-radius, var(--el-border-radius-base)) 0;
  }

  .btn-clean {
    position: absolute;
    right: 0.5rem;
    top: 0;
    cursor: pointer;
    height: 100%;
  }
}
</style>
